<template>
  <uv-popup ref="popup" round="10" zIndex="999999" @close="close">
    <view class="content-main">
      <view class="user flex alignCenter">
        <uv-avatar :src="info.logo" mode="aspectFill" size="60"></uv-avatar>
        <view class="user-info">
          <view class="name bold">{{info.nickName}}</view>
          <view class="fz12">{{info.city}}·{{info.homeEconomize}}</view>
          <view class="fz12 desc" v-if="false">{{info.ageYear}}·{{info.constellation}}</view>
        </view>
      </view>
      <uv-textarea v-model="value" placeholder="请输入内容" height="120" count :customStyle="customStyle"></uv-textarea>
      <uv-button text="立即申请" @click="submit" color="#655DF5" shape="circle" :loading="loading"></uv-button>
    </view>
  </uv-popup>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();

import YeIMStore from "@/stores/YeIM";
const YeIM = YeIMStore();

let info = ref({});
let value = ref("");
let loading = ref(false);

let customStyle = computed(() => {
  return {
    borderColor: "#7572DE !important",
    borderWidth: "1.8px !important",
    margin: "15px 0",
    borderRadius: "15px",
  };
});

function open(data) {
  info.value = data;
  value.value = "你好，希望和你认识一下～";
  instance.refs.popup.open("bottom");
}

function close() {
  value.value = "";
  instance.refs.popup.close();
}

async function submit() {
  try {
    loading.value = true;
    uni.showLoading({
      title: "申请中",
    });
    let res = await YeIM.addFriend(info.value.userId, value.value);
    if (res.code == 20020) {
      proxy.$utils.showToast(res.message);
    }
    proxy.$utils.toLink("/packagePages/user/friendApplyList");
    close();
    uni.hideLoading();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

defineExpose({ open });
</script>



<style lang="scss" scoped>
.content-main {
  padding: 15px 15px 65px 15px;
  background-color: white;
  .user {
    .user-info {
      margin-left: 10px;
      .desc {
        color: #999;
      }
    }
  }
}
</style>



